<template>
  <div class="MyLabel flex flex-wrap gap-8 flex-items-start">
    <div class="flex flex-shrink-0 gap-8 flex-items-center">
      <img :src="current" class="h-15 w-15 flex-shrink-0 font-size-14" />
      <div class="flex-shrink-0 font-size-14 color-#686F7C">{{ label }}:</div>
    </div>
    <div v-if="value" class="flex-1 truncate font-size-14 color-#3A3E45">
      {{ value }}
    </div>
    <slot />
  </div>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MyLabel' })
const props = defineProps({
  icon: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
  value: {
    type: [String, Number],
    default: '',
  },
})
const icons = import.meta.glob('@/assets/label-icons/*.png', { eager: true })
const current = computed(() => {
  return icons[`/src/assets/label-icons/${props.icon}.png`].default
})
</script>
<style lang="scss" scoped></style>
